<template>
  <div>
    <div class="expend">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="店铺ID/名称">
              <el-input
                v-model="formInline.controlNo"
                placeholder="店铺ID/名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交易类型">
              <el-select v-model="formInline.state" placeholder="交易类型">
                <el-option label="店铺订单" value="店铺订单" />
                <el-option label="素材收益" value="素材收益" />
                <el-option label="素材抽佣" value="素材抽佣" />
                <el-option label="店铺权益" value="店铺权益" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input
                v-model="formInline.odd"
                placeholder="订单号"
                type="number"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="9">
            <el-form-item label="申请提现日期">
              <el-date-picker
                v-model="formInline.withdrawaltime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button
                size="medium"
                class="search"
                @click="search"
              >查询</el-button>
              <el-button size="medium" @click="resetting">重置</el-button>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="earnings">
      <span>店铺订单收益：{{ SmokeCommission }}元</span><span> 素材收益：{{ Materialgains }}元</span><span>素材抽佣收益：{{ Theorder }}元</span><span>店铺权益收益：{{ storeRightSum }}元</span><span>平台总收益：{{ Platform }}元</span>
    </div>
    <!-- 表格 -->
    <el-card class="hr-block">
      <el-table
        :data="list"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column label="交易类型" prop="state" />
        <el-table-column label="店铺ID/用户ID" prop="controlNo" />
        <el-table-column label="店铺名称/昵称" prop="name" />
        <el-table-column label="订单号" prop="odd" />
        <el-table-column label="交易金额" prop="money">
          <template slot-scope="{ row }">
            <span>{{ row.money + ' 元' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="抽佣金额" prop="commission">
          <template slot-scope="{ row }">
            <span>{{ row.commission + ' 元' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="平台收益" prop="Platform">
          <template slot-scope="{ row }">
            <span>{{ row.Platform + ' 元' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现时间" prop=" withdrawalcommission">
          <template slot-scope="scope">
            <span>{{ scope.row.withdrawalcommission | formatDate }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            background
            :page-sizes="[2, 4, 8, 10]"
            :current-page.sync="page.page"
            :page-size="page.pageSize"
            layout="total, prev, pager, next"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAllexpend, getAllExpendByTags } from '@/api/accounting'
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      formInline: {
        controlNo: '', // 店铺ID/名称
        state: '', // 交易类型
        odd: '', // 订单号
        withdrawaltime: ''
      },

      page: {
        page: 1,
        total: 0,
        pageSize: 2,
        name: ''
      },
      list: [],
      Platform: 0
    }
  },
  computed: {
    // 店铺权益收益
    storeRightSum() {
      return this.list.reduce((total, obj) => {
        if (obj.state === '店铺权益') {
          total += +obj.Platform
        }
        return total
      }, 0)
    },
    SmokeCommission() {
      return this.list.reduce((total, obj) => {
        if (obj.state === '店铺订单') {
          total += +obj.Platform
        }
        return total
      }, 0)
    },
    Theorder() {
      return this.list.reduce((total, obj) => {
        if (obj.state === '素材抽佣') {
          total += +obj.Platform
        }
        return total
      }, 0)
    },
    Materialgains() {
      return this.list.reduce((total, obj) => {
        if (obj.state === '素材收益') {
          total += +obj.Platform
        }
        return total
      }, 0)
    }
  },
  watch: {},
  created() {
    this.getAllexpend()
  },
  mounted() {},
  methods: {
    async getAllexpend() {
      const res = await getAllexpend()
      this.page.total = res.length
      this.getSales(res)
      console.log(res)
      // 获取所有用户
      const data = await getAllexpend({
        _page: this.page.page,
        _limit: this.page.pageSize,
        name_like: this.page.name || undefined,
        _sort: 'id',
        _order: 'desc'
      })
      this.list = data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.getAllexpend()
      console.log(`当前页: ${val}`)
    },
    async search() {
      // 查询
      if (
        !this.formInline.controlNo.trim().length &&
        !this.formInline.state.trim().length &&
        !this.formInline.odd.trim().length
      ) {
        this.$message.warning('请先输入内容，再查询')
      } else {
        const data1 = await getAllExpendByTags({
          controlNo_like: this.formInline.controlNo,
          state_like: this.formInline.state,
          odd_like: this.formInline.odd
        })
        console.log(data1)
        this.list = data1
        this.getSales(data1)
        this.$message.success('查询成功')
      }
    },
    async resetting() {
      // 重置数据
      this.getAllexpend()
      this.$message.success('重置成功')
      this.formInline = {
        controlNo: '',
        state: '',
        odd: '',
        withdrawaltime: ''
      }
    },
    getSales(arr) {
      // 计算总金额
      let sum = 0
      if (arr) {
        arr.forEach(item => {
          sum += parseFloat(item.Platform)
        })
        this.Platform = sum
      } else {
        this.Platform = sum
      }
    }
  }
}
</script>

<style scoped>
.expend {
  margin: 8px;
  border-radius: 4px;
  border: 1px solid #f90;
  padding: 20px;
}
.earnings span {
  margin: 15px;
}
.search {
  background-color: #f90;
  color: #fff;
}
</style>
